<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取元素的位置和大小</title>
  <style>
    .Main{
      position: absolute;
      background-color: black;
      width: 400px;
      height: 400px;
    }
    .d1{
      background-color: red;
      margin: 10px;
      padding: 20px;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div>
    <ul>
      <li>offsetParent查找父元素时如果父元素没有设置定位就继续往上找祖先元素</li>
      <li class="l1">offsetParent:向上层查找最近的设置定位的父元素,或最近的table,td,th,body元素,返回找到的元素</li>
      <li>offsetLeft:获取元素相对其offsetParent元素左边界的偏移量</li>
      <li>offsetTop:获取元素相对其offsetParent元素上边界的偏移量</li>
      <li>offsetWidth:获取元素（包括border，padding和内容区域）的宽度</li>
      <li>offsetHeight:获取元素(包括border,padding和内容区域)的高度</li>
    </ul>
  </div>

  <div class="Main">
    <div class="d1">

    </div>
  </div>

<script>
  var d1=document.querySelector('.d1');
  console.log('查找最近的设置定位的父元素'+d1.offsetParent);
  console.log('-------------')
  console.log('左边界的偏移量:'+d1.offsetLeft);
  console.log('上边界的偏移量:'+d1.offsetTop);
  console.log('获取元素宽度'+d1.offsetWidth);//240元素本身200px加上每边分别为20的内边距
  console.log('获取元素高度'+d1.offsetHeight);//240元素本身200px加上每边分别为20的内边距
</script>
</body>
</html>